<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 更柔和的蓝色
                        secondary: '#a5b4fc', // 淡紫色作为辅助色
                        lightblue: '#e0f2fe', // 非常淡的蓝色
                        softblue: '#bfdbfe' // 中等淡蓝色
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-float {
                animation: float 4s ease-in-out infinite;
            }
            .soft-gradient-bg {
                background: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 100%);
            }
            .animate-fade-in {
                animation: fadeIn 1.5s ease-in-out;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-8px) scale(1.05);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="font-inter bg-white">
<div id="loader" class="fixed inset-0 z-50 flex items-center justify-center soft-gradient-bg transition-opacity duration-500">
    <div class="text-center animate-fade-in">
        <div class="flex items-center justify-center mb-6">
            <div class="relative">
                <img src="src/assets/book_logo.png" class="h-16 animate-float" alt="图书管理系统Logo">
                <div class="absolute -bottom-1 -right-1 bg-white text-primary p-1.5 rounded-full shadow-sm">
                    <i class="fa fa-spinner fa-spin text-sm"></i>
                </div>
            </div>
        </div>
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2 tracking-tight text-gray-700">图书管理系统</h1>
        <p class="text-gray-500 mb-6">加载中，请稍候...</p>
        <div class="w-64 h-1.5 bg-gray-100 rounded-full overflow-hidden mx-auto shadow-inner">
            <div id="progress-bar" class="h-full bg-primary w-0 transition-all duration-300" style="background-image: linear-gradient(to right, #3b82f6, #60a5fa)"></div>
        </div>
        <p id="loading-text" class="mt-4 text-sm text-gray-500">初始化应用...</p>
    </div>
</div>

<div id="app"></div>
<script type="module" src="/src/main.js"></script>

<script>
    // 加载动画控制
    window.loaderController = {
        progressBar: document.getElementById('progress-bar'),
        loadingText: document.getElementById('loading-text'),
        loader: document.getElementById('loader'),
        progress: 0,
        interval: null,

        // 开始加载动画
        start: function() {
            this.progress = 0;
            this.progressBar.style.width = '0%';

            // 清除之前的间隔
            if (this.interval) clearInterval(this.interval);

            // 启动进度条动画
            this.interval = setInterval(() => {
                // 当进度达到95%时暂停，等待应用真正加载完成
                if (this.progress < 95) {
                    this.progress += Math.random() * 5;
                    this.progressBar.style.width = `${this.progress}%`;

                    // 根据进度更新加载文本
                    if (this.progress < 30) {
                        this.loadingText.textContent = '加载核心组件...';
                    } else if (this.progress < 60) {
                        this.loadingText.textContent = '初始化数据...';
                    } else if (this.progress < 90) {
                        this.loadingText.textContent = '准备界面...';
                    } else {
                        this.loadingText.textContent = '即将完成...';
                    }
                }
            }, 300);
        },

        // 完成加载动画
        complete: function() {
            // 停止进度条动画
            if (this.interval) {
                clearInterval(this.interval);
                this.interval = null;
            }
            // 完成进度条
            this.progress = 100;
            this.progressBar.style.width = '100%';
            this.loadingText.textContent = '加载完成!';
            // 淡出加载动画 - 使用更平滑的过渡
            setTimeout(() => {
                this.loader.style.opacity = '0';
                setTimeout(() => {
                    this.loader.style.display = 'none';
                    // 确保页面内容显示时没有滚动条问题
                    document.body.style.overflow = 'auto';
                }, 600);
            }, 800);
        }
    };
    // 页面加载时启动加载动画
    document.addEventListener('DOMContentLoaded', () => {
        // 防止在加载时页面滚动
        document.body.style.overflow = 'hidden';
        window.loaderController.start();
    });
</script>
</body>
</html>
